import React from 'react'
import { Image } from 'react-vant';
import { useLocation,useNavigate } from "react-router-dom"
import { ActionBar } from 'react-vant';
import {useDispatch,useSelector} from "react-redux"
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import * as action from "../action"
function Detail() {
  const navigate = useNavigate()
  const location = useLocation()
  console.log(location);
   let dispatch = useDispatch()
   let store = useSelector((state)=>{
        return {
          ...state.shopcarreducer
        }
   })
   console.log(store);
   let addShopcar = ()=>{
      // 1.调用action里index.js的方法
      dispatch(action.addShop(location.state.item))
      // 2. 去action下的index.js 写上一行调用的这个方法
      //3. 去reducer写对应的action
   }
  return (
    <div>
      {
        location.state.item && <div>
          <Image width='100%' height='400' src={location.state.item.img} showLoading={true} />
          <div>
            <h4>商品名称：{location.state.item.tit}</h4>&nbsp;&nbsp;&nbsp;<h4>价格：{location.state.item.price}</h4>
            <h4>商品描述：<span>{location.state.item.des}</span></h4>
          </div>

        </div>
      }

      <div className='demo-action-bar'>
        <ActionBar>
          <ActionBar.Icon
            icon={<ChatO />}
            text='客服'
            onClick={() => console.log('chat click')}
          />
          <ActionBar.Icon
            icon={<CartO />}
            text='购物车'
            onClick={() =>navigate("/home/shopcar")}
          />
          <ActionBar.Icon
            icon={<ShopO />}
            text='店铺'
            onClick={() => console.log('shop click')}
          />
          <ActionBar.Button
            type='danger'
            text='加入购物车'
            onClick={() => addShopcar()}
          />
        </ActionBar>
      </div>
    </div>
  )
}

export default Detail